<!DOCTYPE html>
<html>
    <head>
    <!--
        © Material Theme
        https://github.com/viosey/hexo-theme-material
        Version: 1.2.6 -->

    <!-- Title -->
    
    <title>
        
            编写基本路由 | 
        
        sconfield - blog
    </title>

    <!-- Favicons -->
    <link rel="icon shortcut" type="image/ico" href="/img/favicon.png">
    <link rel="icon" sizes="192x192" href="/img/favicon.png">
    <link rel="apple-touch-icon" href="/img/favicon.png">

    <!-- Meta & Info -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="theme-color" content="#0097A7">
    <meta name="author" content="sconfield">
    <meta name="description" content="reading, coding, loving...">
    <meta name="keywords" content="null">

    <!--iOS -->
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-title" content="Title">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="480">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="sconfield - blog">

    <!-- The Open Graph protocol -->
    <meta property="og:url" content="http://sconfield.oschina.io">
    <meta property="og:type" content="blog">
    <meta property="og:title" content="编写基本路由 | sconfield - blog">
    <meta property="og:description" content="reading, coding, loving...">

    <!--[if lte IE 9]>
        <link rel="stylesheet" href="/css/ie-blocker.css">

        
            <script src="/js/ie-blocker.zhCN.js"></script>
        
    <![endif]-->

    <!-- Import CSS -->
    <link rel="stylesheet" href="/css/material.min.css">
    <link rel="stylesheet" href="/css/style.min.css">
    <!-- Config CSS -->


<!-- Other Styles -->
<style>
    body, html {
        font-family: Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
    }

    a {
        color: #00838F;
    }

    .mdl-card__media,
    #search-label,
    #search-form-label:after,
    #scheme-Paradox .hot_tags-count,
    #scheme-Paradox .sidebar_archives-count,
    #scheme-Paradox .sidebar-colored .sidebar-header,
    #scheme-Paradox .sidebar-colored .sidebar-badge{
        background-color: #0097A7 !important;
    }

    /* Sidebar User Drop Down Menu Text Color */
    #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:hover,
    #scheme-Paradox .sidebar-colored .sidebar-nav>.dropdown>.dropdown-menu>li>a:focus {
        color: #0097A7 !important;
    }

    #post_entry-right-info,
    .sidebar-colored .sidebar-nav li:hover > a,
    .sidebar-colored .sidebar-nav li:hover > a i,
    .sidebar-colored .sidebar-nav li > a:hover,
    .sidebar-colored .sidebar-nav li > a:hover i,
    .sidebar-colored .sidebar-nav li > a:focus i,
    .sidebar-colored .sidebar-nav > .open > a,
    .sidebar-colored .sidebar-nav > .open > a:hover,
    .sidebar-colored .sidebar-nav > .open > a:focus,
    #ds-reset #ds-ctx .ds-ctx-entry .ds-ctx-head a {
        color: #0097A7 !important;
    }

    .toTop {
        background: #757575 !important;
    }

    .material-layout .material-post>.material-nav,
    .material-layout .material-index>.material-nav,
    .material-nav a {
        color: #757575;
    }

    #scheme-Paradox .MD-burger-layer {
        background-color: #757575;
    }

    #scheme-Paradox #post-toc-trigger-btn {
        color: #757575;
    }

    .post-toc a:hover {
        color: #00838F;
        text-decoration: underline;
    }
</style>


<!-- Theme Background Related-->

    <style>
        body{
            background-image: url(/img/bg.png);
        }
    </style>




<!-- Fade Effect -->

    <style>
        .fade {
            transition: all 800ms linear;
            -webkit-transform: translate3d(0,0,0);
            -moz-transform: translate3d(0,0,0);
            -ms-transform: translate3d(0,0,0);
            -o-transform: translate3d(0,0,0);
            transform: translate3d(0,0,0);
            opacity: 1;
        }

        .fade.out{
            opacity: 0;
        }
    </style>


    <script src="/js/jquery.min.js"></script>

    <link rel="stylesheet" href="/css/highlight/solarized-white.css">

    <!-- UC Browser Compatible-->
    <script>
        var agent = navigator.userAgent.toLowerCase();
        if(agent.indexOf('ucbrowser')>0) {
            document.write('<link rel="stylesheet" href="/css/uc.css">');
            alert('由于 UC 浏览器使用极旧的内核，而本网站使用了一些新的特性。\n为了您能更好的浏览，推荐使用 Chrome 或 Firefox 浏览器。');
        }
    </script>

    <!-- Custom Head -->
    
</head>


    
        <body id="scheme-Paradox">
            <div class="material-layout  mdl-js-layout has-drawer is-upgraded">
                

                <!-- Main Container -->
                <main class="material-layout__content" id="main">

                    <!-- Top Anchor -->
                    <div id="top"></div>

                    
                        <!-- Hamburger Button -->
                        <button class="MD-burger-icon sidebar-toggle">
                            <span class="MD-burger-layer"></span>
                        </button>
                    

                    <!-- Post TOC -->

    
    <!-- Back Button -->
    <!--
    <div class="material-back" id="backhome-div" tabindex="0">
        <a class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon"
           href="#" onclick="window.history.back();return false;"
           target="_self"
           role="button"
           data-upgraded=",MaterialButton,MaterialRipple">
            <i class="material-icons" role="presentation">arrow_back</i>
            <span class="mdl-button__ripple-container">
                <span class="mdl-ripple"></span>
            </span>
        </a>
    </div>
    -->

    <!-- Left aligned menu below button -->
    <button id="post-toc-trigger-btn"
        class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">format_list_numbered</i>
    </button>

    <ul class="post-toc-wrap mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect" for="post-toc-trigger-btn">
        <ol class="post-toc"><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#都上班了"><span class="post-toc-number">1.</span> <span class="post-toc-text">都上班了</span></a></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#接着年前的任务"><span class="post-toc-number">2.</span> <span class="post-toc-text">接着年前的任务</span></a><ol class="post-toc-child"><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#dva-大娃-真厉害"><span class="post-toc-number">2.1.</span> <span class="post-toc-text">dva 大娃 真厉害</span></a></li><li class="post-toc-item post-toc-level-2"><a class="post-toc-link" href="#嗖嗖-欧了"><span class="post-toc-number">2.2.</span> <span class="post-toc-text">嗖嗖 欧了</span></a></li></ol></li><li class="post-toc-item post-toc-level-1"><a class="post-toc-link" href="#接下来"><span class="post-toc-number">3.</span> <span class="post-toc-text">接下来</span></a></li></ol>

        <!--
        <li class="mdl-menu__item">
            Some Action
        </li>
        -->
    </ul>




<!-- Layouts -->

    <!-- Post Module -->
    <div class="material-post_container">

        <div class="material-post mdl-grid">
            <div class="mdl-card mdl-shadow--4dp mdl-cell mdl-cell--12-col">

                <!-- Post Header(Thumbnail & Title) -->
                
    <!-- Paradox Post Header -->
    
        
            <!-- Random Thumbnail -->
            <div class="post_thumbnail-random mdl-card__media mdl-color-text--grey-50">
            <script>
    var randomNum = Math.floor(Math.random() * 19 + 1);

    $('.post_thumbnail-random').css('background-image', 'url(' + '/img/random/material-' + randomNum + '.png' + ')');
</script>

        
    
            <p class="article-headline-p">
                编写基本路由
            </p>
        </div>





                
                    <!-- Paradox Post Info -->
                    <div class="mdl-color-text--grey-700 mdl-card__supporting-text meta">

    <!-- Author Avatar -->
    <div id="author-avatar">
        <img src="/img/sconfield.jpg" width="44px" height="44px" alt="Author Avatar"/>
    </div>
    <!-- Author Name & Date -->
    <div>
        <strong>sconfield</strong>
        <span>2月 03, 2017</span>
    </div>

    <div class="section-spacer"></div>

    <!-- Favorite -->
    <!--
        <button id="article-functions-like-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon btn-like">
            <i class="material-icons" role="presentation">favorite</i>
            <span class="visuallyhidden">favorites</span>
        </button>
    -->

    <!-- Qrcode -->
    

    <!-- Tags (bookmark) -->
    
    <button id="article-functions-viewtags-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
        <i class="material-icons" role="presentation">bookmark</i>
        <span class="visuallyhidden">bookmark</span>
    </button>
    <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-functions-viewtags-button">
        <li class="mdl-menu__item">
        <a class="post_tag-link" href="/tags/2017小目标/">2017小目标</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/clothesest/">clothesest</a></li><li class="mdl-menu__item"><a class="post_tag-link" href="/tags/english/">english</a>
    </ul>
    

    <!-- Share -->
    <button id="article-fuctions-share-button" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon">
    <i class="material-icons" role="presentation">share</i>
    <span class="visuallyhidden">share</span>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect" for="article-fuctions-share-button">
    

    
        
            <!-- Busuanzi Views -->
            <a class="post_share-link" href="#">
                <li class="mdl-menu__item">
                    <span id="busuanzi_container_page_pv">
                        <span id="busuanzi_value_page_pv"></span>&nbsp;浏览量
                    </span>
                </li>
            </a>
        
    

    <!-- Share Weibo -->
    
        <a class="post_share-link" href="http://service.weibo.com/share/share.php?appkey=&title=编写基本路由&url=http://sconfield.oschina.io//2017/02/03/编写基本路由/index.html&pic=&searchPic=false&style=simple" target="_blank">
            <li class="mdl-menu__item">
                分享到微博
            </li>
        </a>
    

    <!-- Share Twitter -->
    
        <a class="post_share-link" href="https://twitter.com/intent/tweet?text=编写基本路由&url=http://sconfield.oschina.io//2017/02/03/编写基本路由/index.html&via=sconfield" target="_blank">
            <li class="mdl-menu__item">
                分享到 Twitter
            </li>
        </a>
    

    <!-- Share Facebook -->
    
        <a class="post_share-link" href="https://www.facebook.com/sharer/sharer.php?u=http://sconfield.oschina.io//2017/02/03/编写基本路由/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Facebook
            </li>
        </a>
    

    <!-- Share Google+ -->
    
        <a class="post_share-link" href="https://plus.google.com/share?url=http://sconfield.oschina.io//2017/02/03/编写基本路由/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 Google+
            </li>
        </a>
    

    <!-- Share LinkedIn -->
    
        <a class="post_share-link" href="https://www.linkedin.com/shareArticle?mini=true&url=http://sconfield.oschina.io//2017/02/03/编写基本路由/index.html&title=编写基本路由" target="_blank">
            <li class="mdl-menu__item">
                分享到 LinkedIn
            </li>
        </a>
    

    <!-- Share QQ -->
    
        <a class="post_share-link" href="http://connect.qq.com/widget/shareqq/index.html?site=sconfield - blog&title=编写基本路由&summary=reading, coding, loving...&pics=http://sconfield.oschina.io/img/favicon.png&url=http://sconfield.oschina.io/2017/02/03/编写基本路由/index.html" target="_blank">
            <li class="mdl-menu__item">
                分享到 QQ
            </li>
        </a>
    

    <!-- Share Telegram -->
    
        <a class="post_share-link" href="https://telegram.me/share/url?url=http://sconfield.oschina.io//2017/02/03/编写基本路由/index.html&text=编写基本路由" target="_blank">
            <li class="mdl-menu__item">
                分享到 Telegram
            </li>
        </a>
    
</ul>

</div>

                

                <!-- Post Content -->
                <div id="post-content" class="markdown-Github mdl-color-text--grey-700 mdl-card__supporting-text fade out">
    
        <h1 id="都上班了"><a href="#都上班了" class="headerlink" title="都上班了"></a>都上班了</h1><p>今天大家都上班了，所以也不用走亲戚串门了。作为无业游民的我绝对不能闲着。上午狂刷了 <a href="http://www.duolingo.cn/sconfield" target="_blank" rel="external">duolingo</a> 260分，期间也玩了 <a href="https://hinative.com/en-US/profiles/466300" target="_blank" rel="external">hiNative</a> ，这款 app 的教学模式和 <a href="http://lang-8.com" target="_blank" rel="external">lang-8</a> 一摸一样，玩了半天后才发现她就是 lang-8 旗下的一款手机应用 😚， 还想着要重新找回 lang-8 的账号呢，哈哈！为了学好英文来扩展自己的职业道路，我也是蛮拼的。不过，看了看 duolingo 剩下的关卡，还不够，必须加快进度，要尽快完成啊，2017可是过了1个月了，fighting～</p>
<table>
<thead>
<tr>
<th>duolingo</th>
<th>hiNative</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="/images/duolingo-31.png" alt="duolingo"></td>
<td><img src="/images/hiNative.png" alt="hiNative"></td>
</tr>
</tbody>
</table>
<h1 id="接着年前的任务"><a href="#接着年前的任务" class="headerlink" title="接着年前的任务"></a>接着年前的任务</h1><p>晚上吃完饭就想着我的 clothesest，可是忘了做到那一步了，打开 teambition 看了一下，已经画好流程图了，接下来应该搭建环境编写代码了，嗯，一步一步来吧！</p>
<p><img src="/images/clothesest-route.png" alt="clothesest route"></p>
<h2 id="dva-大娃-真厉害"><a href="#dva-大娃-真厉害" class="headerlink" title="dva 大娃 真厉害"></a>dva 大娃 真厉害</h2><p><a href="https://github.com/dvajs" target="_blank" rel="external">dva</a> 的图标是个愤怒的兔子，即霸气又可爱！官方说是游戏角色的名字，很厉害的角色。赫赫，我也叫她大娃，葫芦娃里的大娃，也很厉害的 😳 。</p>
<p>Why is it called dva?</p>
<blockquote>
<p>D.Va’s mech is nimble and powerful — its twin Fusion Cannons blast away with autofire at short range, and she can use its Boosters to barrel over enemies and obstacles, or deflect attacks with her projectile-dismantling Defense Matrix.</p>
</blockquote>
<p>—— From OverWatch</p>
<h2 id="嗖嗖-欧了"><a href="#嗖嗖-欧了" class="headerlink" title="嗖嗖 欧了"></a>嗖嗖 欧了</h2><p>就几条大娃指令，这个路由框架就出来了，比较顺利，没出现啥意外 😄 .</p>
<p><img src="/images/dva-cli-route.png" alt="dva-cli-route"></p>
<p>然后和 react-router 一样，写几个 Link 就好了。</p>
<p><img src="/images/atom-add-route.png" alt="atom-add-route"></p>
<h1 id="接下来"><a href="#接下来" class="headerlink" title="接下来"></a>接下来</h1><p>有了基本框架，接下来就是 UI 布局了，希望明天不要想太多，画太复杂了，尽量简化，简化～</p>

    

    
</div>


                

                <!-- Post Comments -->
                
                    
    <!-- 使用多说评论 -->
    <link rel="stylesheet" href="/css/duoshuo.min.css">
<style>
    #ds-thread #ds-reset .ds-post-button{
        background-color: #0097A7 !important;
    }
    #ds-wrapper #ds-reset .ds-icons-32{
        background-color: #0097A7 !important;
    }
    #ds-reset .ds-highlight {
        color: #0097A7 !important;
    }
</style>
<div id="comments">
    <!-- 多说评论框 start -->
    <div class="ds-thread"
        data-thread-key=""
        data-url="http://sconfield.oschina.io/2017/02/03/编写基本路由/"
        data-title="编写基本路由">
    </div>
    <!-- 多说评论框 end -->
</div>





                
            </div>

            <!-- Post Prev & Next Nav -->
            <nav class="material-nav mdl-color-text--grey-50 mdl-cell mdl-cell--12-col">
    <!-- Prev Nav -->
    
        <a href="/2017/02/04/迅猛设计/" id="post_nav-newer" class="prev-content">
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_back</i>
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            新篇
        </a>
    

    <!-- Section Spacer -->
    <div class="section-spacer"></div>

    <!-- Next Nav -->
    
        <a href="/2017/01/28/2017得有个小目标/" id="post_nav-older" class="next-content">
            旧篇
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon mdl-color--white mdl-color-text--grey-900" role="presentation">
                <i class="material-icons">arrow_forward</i>
            </button>
        </a>
    
</nav>

        </div>
    </div>



                    
                        <!-- Overlay For Active Sidebar -->
<div class="sidebar-overlay"></div>

<!-- Material sidebar -->
<aside id="sidebar" class="sidebar sidebar-colored sidebar-fixed-left" role="navigation">
    <div id="sidebar-main">
        <!-- Sidebar Header -->
        <div class="sidebar-header header-cover" style="background-image: url(/img/sidebar_header.png);">
    <!-- Top bar -->
    <div class="top-bar"></div>

    <!-- Sidebar toggle button -->
    <button type="button" class="sidebar-toggle mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" style="display: initial;" data-upgraded=",MaterialButton,MaterialRipple">
        <i class="material-icons">clear_all</i>
        <span class="mdl-button__ripple-container">
            <span class="mdl-ripple">
            </span>
        </span>
    </button>

    <!-- Sidebar Avatar -->
    <div class="sidebar-image">
        <img src="/img/sconfield.jpg" alt="sconfield's avatar">
    </div>

    <!-- Sidebar Email -->
    <a data-toggle="dropdown" class="sidebar-brand" href="#settings-dropdown">
        isconfield@icloud.com
        <b class="caret"></b>
    </a>
</div>


        <!-- Sidebar Navigation  -->
        <ul class="nav sidebar-nav">
    <!-- User dropdown  -->
    <li class="dropdown">
        <ul id="settings-dropdown" class="dropdown-menu">
            
                <li>
                    <a href="#" target="_blank" title="Email Me">
                        <i class="material-icons sidebar-material-icons sidebar-indent-left1pc-element">email</i>
                        Email Me
                    </a>
                </li>
            
        </ul>
    </li>

    <!-- Homepage -->
    <li id="sidebar-first-li">
        <a href="/" target="_self">
            <i class="material-icons sidebar-material-icons">home</i>
            主页
        </a>
    </li>

    <!-- I'm Feeling Lucky -->
    <!--
    <li class="dropdown">
        <a href="" target="_self">
            <i class="material-icons sidebar-material-icons">explore</i>
             sidebar.imlucky
        </a>
    </li>
    -->

    <!-- Archives  -->
    <li class="dropdown">
        <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
            <i class="material-icons sidebar-material-icons">inbox</i>
             归档
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li>
            <a class="sidebar_archives-link" href="/archives/2017/03/">三月 2017<span class="sidebar_archives-count">4</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/02/">二月 2017<span class="sidebar_archives-count">11</span></a></li><li><a class="sidebar_archives-link" href="/archives/2017/01/">一月 2017<span class="sidebar_archives-count">3</span></a>
        </ul>
    </li>

    <!-- Categories  -->
    
        <li class="dropdown">
            <a href="#" class="ripple-effect dropdown-toggle" data-toggle="dropdown">
                <i class="material-icons sidebar-material-icons">chrome_reader_mode</i>
                分类
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li>
                <a class="sidebar_archives-link" href="/categories/coding/">coding<span class="sidebar_archives-count">9</span></a></li><li><a class="sidebar_archives-link" href="/categories/loving/">loving<span class="sidebar_archives-count">1</span></a></li><li><a class="sidebar_archives-link" href="/categories/reading/">reading<span class="sidebar_archives-count">8</span></a>
            </ul>
        </li>
    

    <!-- Divider -->
    <li class="divider"></li>


    <!-- Pages  -->
  	
        <li>
            <a href="/about/" title="关于我">
                
                    <i class="material-icons sidebar-material-icons">person</i>
                
                关于我
            </a>
        </li>
  	
        <li>
            <a href="/tags/" title="标签云">
                
                    <i class="material-icons sidebar-material-icons">icon</i>
                
                标签云
            </a>
        </li>
  	

    <!-- Article Numebr  -->
    <li>
        <a href="/archives">
            文章总数
            <span class="sidebar-badge">18</span>
        </a>
    </li>
</ul>


        <!-- Sidebar Divider -->
        <div class="sidebar-divider"></div>

        <!-- Sidebar Footer -->
        <!--
I'm glad you use this theme, the development is no so easy, I hope you can keep the copyright, I will thank you so much.
If you still want to delete the copyrights, could you still retain the first one? Which namely "Theme Material"
It will not impact the appearance and can give developers a lot of support :)

很高兴您使用并喜欢该主题，开发不易 十分谢谢与希望您可以保留一下版权声明。
如果您仍然想删除的话 能否只保留第一项呢？即 "Theme Material"
它不会影响美观并可以给开发者很大的支持和动力。 :)
-->

<!-- Theme Material -->
<a href="https://github.com/viosey/hexo-theme-material"  class="sidebar-footer-text-a" target="_blank">
    <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
        主题 - Material
        <span class="sidebar-badge badge-circle">i</span>
    </div>
</a>

<!-- Help & Support -->
<!--
<a href="mailto:hiviosey@gmail.com" class="sidebar-footer-text-a">
    <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
    sidebar.help
    <span class="mdl-button__ripple-container">
      <span class="mdl-ripple"></span>
    </span>
  </div>
</a>
-->

<!-- Feedback -->
<!--
<a href="https://github.com/viosey/hexo-theme-material/issues" target="_blank" class="sidebar-footer-text-a">
    <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
         sidebar.feedback
                    <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></div>
</a>
-->

<!-- Abount Theme -->
<!--
<a href="https://blog.viosey.com/index.php/Material.html" target="_blank" class="sidebar-footer-text-a">
    <div class="sidebar-text mdl-button mdl-js-button mdl-js-ripple-effect sidebar-footer-text-div" data-upgraded=",MaterialButton,MaterialRipple">
         sidebar.about_theme
        <span class="mdl-button__ripple-container"><span class="mdl-ripple"></span></span></div>
</a>-->

    </div>

    <!-- Sidebar Sponsor -->
    
    <div id="upyun-logo">
        <a href="https://www.upyun.com/" target="_blank">
            <img src="/img/upyun_logo.png" alt="upyun_league">
        </a>
    </div>


</aside>

                    

                    
                        <!-- Footer Top Button -->
                        <div class="toTop-wrap">
    <a href="#top" class="toTop">
        <i class="material-icons footer_top-i">expand_less</i>
    </a>
</div>

                    

                    <!--Footer-->
<footer class="mdl-mini-footer" id="bottom">
    
        <!-- Paradox Footer Left Section -->
        <div class="mdl-mini-footer--left-section sns-list">
    <!-- Twitter -->
    

    <!-- Facebook -->
    
        <a href="https://www.facebook.com/isconfield" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-facebook.png);">
                <span class="visuallyhidden">Facebook</span>
            </button><!--
     --></a>
    

    <!-- Google + -->
    

    <!-- Weibo -->
    

    <!-- Instagram -->
    
        <a href="https://www.instagram.com/jingjingbook" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-instagram.png);">
                <span class="visuallyhidden">Instagram</span>
            </button><!--
     --></a>
    

    <!-- Tumblr -->
    

    <!-- Github -->
    
        <a href="https://github.com/sconfield" target="_blank">
            <button class="mdl-mini-footer--social-btn social-btn" style="background-image: url(/img/footer/footer_ico-github.png);">
                <span class="visuallyhidden">Github</span>
            </button><!--
     --></a>
    

    <!-- LinkedIn -->
    

    <!-- Zhihu -->
    

    <!-- Bilibili -->
    

    <!-- Telegram -->
    
</div>


        <!--Copyright-->
        <div id="copyright">
            Copyright&nbsp;©&nbsp;
            <script type="text/javascript">
                var fd = new Date();
                document.write(fd.getFullYear());
            </script>
            &nbsp;sconfield - blog
        </div>

        <!-- Paradox Footer Right Section -->

        <!--
        I am glad you use this theme, the development is no so easy, I hope you can keep the copyright.
        It will not impact the appearance and can give developers a lot of support :)

        很高兴您使用该主题，开发不易，希望您可以保留一下版权声明。
        它不会影响美观并可以给开发者很大的支持。 :)
        -->

        <div class="mdl-mini-footer--right-section">
            <div>
                <div class="footer-develop-div">Powered by <a href="https://hexo.io" target="_blank" class="footer-develop-a">Hexo</a></div>
                <div class="footer-develop-div">Theme - <a href="https://github.com/viosey/hexo-theme-material" target="_blank" class="footer-develop-a">Material</a></div>
            </div>
        </div>
    
</footer>


                    <!-- Import File -->
<script src="/js/highlight.min.js"></script>
<script src="/js/js.min.js"></script>
<script src="/js/nprogress.js"></script>

<script type="text/javascript">
    NProgress.configure({
        showSpinner: true
    });
    NProgress.start();

    $('#nprogress .bar').css({
        'background': '#FF4081'
    });
    $('#nprogress .peg').css({
        'box-shadow': '0 0 10px #FF4081, 0 0 15px #FF4081'
    });
    $('#nprogress .spinner-icon').css({
        'border-top-color': '#FF4081',
        'border-left-color': '#FF4081'
    });

    setTimeout(function() {
        NProgress.done();
        $('.fade').removeClass('out');
    }, 800);
</script>







    <!-- Busuanzi -->
    <script src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>



    <!-- 多说公共 js 代码 start -->
    <script type="text/javascript">
        var duoshuoQuery = {
            short_name: 'isconfield'
        };
        (function() {
            var ds = document.createElement('script');
            ds.type = 'text/javascript';
            ds.async = true;
            ds.src = 'https://static.duoshuo.com/embed.js';
            ds.charset = 'UTF-8';
            (document.getElementsByTagName('head')[0]
             || document.getElementsByTagName('body')[0]).appendChild(ds);
        })();
    </script>
    <!-- 多说公共 js 代码 end -->





<!-- Swiftye -->


<!-- Local Search-->


<!-- Window Load-->
<script>
    $(window).load(function() {
        // Post_Toc parent position fixed
        $('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
    });
</script>

<!-- MathJax Load-->


                </main>
            </div>
        </body>
    
</html>
